<template>
	<view class="bizPage">
		<status-bar title="基本信息" />
		<view class="padding20">
			<view class="card">
				<view class="item d-flex" v-for="(item,index) in list1" :key="index">
					<view class="size28 color-666">{{ item.name }}：</view>
					<view class="flex-1 text-right size28 color-222">{{ pageData[item.key] }}</view>
				</view>
			</view>
			<view class="card">
				<view class="title" @click="show2 = !show2">
					<view class="line m-right10"></view>
					<view class="flex-1 size30 color-222 bold">教育信息</view>
					<view class="size24 color-666 m-right10">{{ show2 ? '收起' : '展开' }}</view>
					<text class="iconfont icon-xiangxia size24 color-999" :class="{'up': show2}"></text>
				</view>
				<block v-for="(item,index) in pageData.educationExperience" :key="index">
					<view class="item d-flex a-center">
						<view class="label flexac size26">毕业院校</view>
						<view class="flex-1 text-right size28 color-222">{{ item.schoolName }}</view>
					</view>
					<block v-if="show2">
						<view class="item d-flex" v-for="(subItem,subIndex) in list2" :key="subIndex">
							<view class="size28 color-666">{{ subItem.name }}：</view>
							<view class="flex-1 text-right size28 color-222">{{ item[subItem.key] }}</view>
						</view>
					</block>
				</block>
			</view>
			<view class="card">
				<view class="title" @click="show3 = !show3">
					<view class="line m-right10"></view>
					<view class="flex-1 size30 color-222 bold">工作经历</view>
					<view class="size24 color-666 m-right10">{{ show3 ? '收起' : '展开' }}</view>
					<text class="iconfont icon-xiangxia size24 color-999" :class="{'up': show3}"></text>
				</view>
				<block v-for="(item,index) in pageData.workExperience" :key="index">
					<view class="item d-flex a-center" v-if="show3 || index == 0">
						<view class="label flexac size26">公司名称</view>
						<view class="flex-1 text-right size28 color-222">{{ item.companyName }}</view>
					</view>
					<block v-if="show3">
						<view class="item d-flex" v-for="(subItem,subIndex) in list3" :key="subIndex">
							<view class="size28 color-666">{{ subItem.name }}：</view>
							<view class="flex-1 text-right size28 color-222">{{ item[subItem.key] }}</view>
						</view>
					</block>
				</block>
			</view>
			<view class="card">
				<view class="title m-bot30" @click="show4 = !show4">
					<view class="line m-right10"></view>
					<view class="flex-1 size30 color-222 bold">附件材料</view>
					<view class="size24 color-666 m-right10">{{ show4 ? '收起' : '展开' }}</view>
					<text class="iconfont icon-xiangxia size24 color-999" :class="{'up': show4}"></text>
				</view>
				<view class="row j-sb">
					<block v-for="(item,index) in list4" :key="index">
						<view class="text-center m-bot40" v-if="(show4 || index < 2) && pageData[item.key]">
							<image class="img m-bot20" :src="imgUrls(pageData[item.key])" mode="aspectFill"></image>
							<view class="size28 color-666">{{ item.name }}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { Toast, imgUrls } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'
	
	// 若接口返回对象可用key去匹配value
	const list1 = ref([
		{ name: '员工姓名', key: 'name' },
		{ name: '证件类型', key: 'idTypeName' },
		{ name: '证件号码', key: 'idNumber' },
		{ name: '联系电话', key: 'tel' },
		{ name: '性别', key: 'genderName' },
		{ name: '出生日期', key: 'birthDate' },
		{ name: '民族', key: 'ethnicity' },
		{ name: '户籍地址', key: 'address' },
		{ name: '现居地址', key: 'currentAddress' },
		{ name: '婚姻状态', key: 'maritalStatus' }
	])
	const list2 = ref([
		{ name: '学历', key: 'educationName' },
		{ name: '专业', key: 'major' },
		{ name: '入学时间', key: 'startDate' },
		{ name: '毕业时间', key: 'endDate' }
	])
	const show2 = ref(false)
	const list3 = ref([
		{ name: '职位', key: 'position' },
		{ name: '入职时间', key: 'startDate' },
		{ name: '离职原因', key: 'reason' },
		{ name: '离职时间', key: 'endDate' }
	])
	const show3 = ref(false)
	const list4 = ref([
		{ name: '身份证正面', key: 'idCardFront' },
		{ name: '身份证反面', key: 'idCardBack' },
		{ name: '学历证书', key: 'educationCertificate' },
		{ name: '学位证书', key: 'degreeCertificate' },
		{ name: '离职证明', key: 'graduationCertificate' },
		{ name: '体检报告', key: 'medicalReport' },
		{ name: '劳动合同', key: 'laborContract' }
	])
	const show4 = ref(false)

	const employeeId = ref('')
	const pageData = ref('')

	onLoad((e) => {
		if(e.employeeId) employeeId.value = e.employeeId
		getInfo()
	})

	const getInfo = () => {
		Http.get({
			url: '/hr/Employee/detail',
			data: {
				employeeId: employeeId.value
			}
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			pageData.value = res.data
		})
	}
</script>

<style lang="scss" scoped>
	.bizPage {
		min-height: 100vh;
		background: #F9F9F9;
	}  
	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		.item {
			padding: 30rpx 0;
			&:not(:last-child) {
				border-bottom: 1rpx solid #F2F2F2;
			}
			.label {
				width: 148rpx;
				height: 48rpx;
				border: 1rpx solid #1885FF;
				border-radius: 24rpx;
				color: #1885FF;
			}
		}
		.title {
			display: flex;
			align-items: center;
			padding-top: 30rpx;
			.line {
				width: 4rpx;
				height: 28rpx;
				background: #1885FF;
			}
			.icon-xiangxia {
				transform: rotate(0deg);
				transition: transform 0.1s ease-in-out;
				&.up {
					transform: rotate(180deg);
				}
			}
		}
		.img {
			width: 306rpx;
			height: 208rpx;
			border: 1rpx solid #E1E1E1;
			border-radius: 10rpx;
		}
	}
</style>
